<!DOCTYPE html>
<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
        <title>verify插件demo</title>
		<link rel="stylesheet" type="text/css" href="css/verify.css">
		
<!--		<script>-->
<!--			(function () {-->
<!--			  if (!window.Promise) {-->
<!--				document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' + 'script>');-->
<!--			  }-->
<!--			})();-->
<!--		</script>-->
		<style>
			.btn{
				border: none;
				outline: none;
				width: 300px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				background-color: #409EFF;
				color: #fff;
				font-size: 16px;
				letter-spacing: 1em;
			}
		</style>
    </head>
    <body>
		<div class="box">
			<h1>verify---anji</h1>
			<p>前后端联合交互的验证码插件</p>
			
			<br><br>
			<div th:text="${msg}"></div>

			<h3>滑动弹出式（slider-popup）</h3>
			<form action="/login" method="post" id="login-form">
				<input type="text" name="captchaVerification" id="captchaVerification">
				<button type="button" class="btn" id='btn'>点击我</button>
			</form>

			<div id="mpanel2" style="margin-top:50px;">
			</div>

		</div>
		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js" ></script>
		<script src="./js/crypto-js.js"></script>
		<script src="./js/ase.js"></script>
        <script src="js/verify.js" ></script>

        
        <script>

			
			// // 初始化验证码  弹出式
			$('#mpanel2').slideVerify({
				baseUrl:'http://localhost:8080',  //服务器请求地址, 默认地址为安吉服务器;
				mode:'pop',     //展示模式
				containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
				imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
					width: '400px',
					height: '200px',
				},
				barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
					width: '400px',
					height: '40px',
				},
				beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效

						return true
					
				},
				ready : function() {},  //加载完毕的回调
				success : function(params) { //成功的回调
					// params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
					// 例如: login($.extend({}, params))
					$('#captchaVerification').val("sdsdsdsdsdsd");

					},
				error : function() {}        //失败的回调
			});
			

        </script>
    </body>
 
</html>